<template>
	<view class="pageV">
		<u-navbar title="掌柜贡献排名" placeholder :autoBack="true" leftIconColor="#fff" bgColor="#111111"
			:titleStyle="titleStyle">

		</u-navbar>
		<view class="fone">
			<view class="foneitem" :class="item.value==type?'factive':''" v-for="(item,index) in typelist" :key="index" @click="headClick(item.value)">{{item.name}}</view>
			<!-- <view class="foneitem">本年</view>
			<view class="foneitem">累计</view> -->
		</view>
		<view class="ztwo">
			<view class="zgui">
				<view class="zguiitemone">
					<text class="painameone" v-if="forms.biaolist">{{forms.biaolist[0].name}}</text>
					<view class="numview" v-for="(item,index) in forms.navlist" :key="index">
						<text class="painame">{{item.id}}</text>
					</view>
				</view>
				<scroll-view class="zguiview" scroll-x>
					<view class="znews">
						<view class="rowitem">
							<!--  :class="item.name=='掌柜姓名'?'ractive':''" -->
							<view class="rowtit" v-if="index!=0" v-for="(item,index) in forms.biaolist" :key="index" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}">
								<text class="rowname txt">{{item.name}}</text>
								<!-- <view class="shangview" v-if="index > 1">
									<image src="/shop/static/shang.png" class="shang"></image>
									<image src="/shop/static/shang.png" class="shang" style="transform: rotate(180deg);"></image>
								</view> -->
							</view>
						</view>
						<view class="rowitem" v-for="(item,index) in forms.navlist" :key="index">
							<view class="rowmiao" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}">
								<text class="rowmiaoname txt">{{item.name}}</text>
							</view>
							<view class="rowmiao" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}">
								<text class="rowmiaoname txt">{{item.count}}</text>
							</view>
							<view class="rowmiao" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}">
								<text class="rowmiaoname txt">{{item.yye}}</text>
							</view>
							<view class="rowmiao" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}">
								<text class="rowmiaoname txt">{{item.bfb}}</text>
							</view>
							<view class="rowmiao" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}">
								<text class="rowmiaoname txt">{{item.maoli}}</text>
							</view>
							<view class="rowmiao" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}">
								<text class="rowmiaoname txt">{{item.shouyi}}</text>
							</view>
						</view>
						
					</view>
					
				</scroll-view>

			</view>
			<!-- <view class="zgui">
				<view class="zguiitemone">
					<text class="painame">1</text>
				</view>
				<scroll-view class="zguiview" scroll-x>
					<view class="one" v-for="(item,index) in 10" :key="index">
						<text class="painame">index</text>
						<view class="shangview">
							<image src="/shop/static/shang.png" class="shang"></image>
							<image src="/shop/static/shangs.png" class="shang"></image>
						</view>
					</view>
				</scroll-view>

			</view> -->
		</view>
		


		<!-- <view  v-if="mRoleList.length==0" class="noV">
				<image src="https://s1.ax1x.com/2023/04/19/p9FHmWR.png" mode="aspectFill"></image>
				<view>咦~，一片空白，还没有数据呢</view>
			</view> -->
</view>
</template>

<script>

export default {
	data() {
		return {
			titleStyle: {
				"color": "#ffffff"
			},
			mRoleList: [],
			pos: -1,
			type: 0,//是否是第一次进来  0第一次  1第二次
			tabwidth:'140',
			biaolist:[
				{name:'掌柜姓名'},{name:'拓客数量'},{name:'贡献营业额'},{name:'贡献占比'},
				{name:'店家毛利'},{name:'掌柜奖励'}
			],
			navlist:[
				{id:1,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:2,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:3,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:4,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:5,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:6,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:7,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:8,name:'张三',nums:'100',zhanbi:'52.17%'},

			],
			mRoleId:-1,
			type:'month',
			typelist:[],
			forms:{
				biaolist:[
				{name:''}
				],
				navlist:[],
			},
			zonglist:[]
		}
	},
	onLoad(e) {
		this.mRoleId = e.mRoleId;
		this.$api.getRanklistPm({
			role_id:this.mRoleId,
		}).then((res) => {
			// console.log(res)
			this.typelist = res.type_arr
			this.type = res.type_arr[0].value
			this.getRanklistPm(); //信息
		}).catch((e) => {
			uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
		})
		
	},
	methods: {
		getRanklistPm() {
			this.$api.getRanklistPm({
				role_id:this.mRoleId,
				type:this.type
			}).then((res) => {
				// console.log(res)
				this.forms = res.forms
			}).catch((e) => {
				uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
			})
		},
		headClick(value){
			this.type = value
			this.getRanklistPm(); //信息
		}
	}
}
</script>

<style lang="scss">
.pageV {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.fone {
	display: flex;
	flex-direction: row;
	margin: 30rpx 30rpx 0;

	.foneitem {
		width: 140rpx;
		height: 60rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(147, 147, 147, 1);

	}

	.factive {
		background: rgba(212, 255, 69, 1);
		color: rgba(51, 55, 55, 1);
	}

	.foneitem:first-child {
		border-radius: 5rpx 0px 0px 5rpx;
	}

	.foneitem:last-child {
		border-radius: 0px 5rpx 5rpx 0px;
	}

}
.ztwo{
	display: flex;
	flex-direction: column;
}
.zgui {
	position: relative;
	// padding-left: 100rpx;
	padding: 30rpx 20rpx;
	display: flex;
	flex-direction: row;
}

.zguiitemone {
	position: absolute;
	left: 0;
	width: 100rpx;
	text-align: center;
	display: flex;
	flex-direction: column;
	.numview{
		width: 100rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(232, 232, 232, 1);
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

}
.shangview{
	display: flex;
	flex-direction: column;
	margin-left: 5rpx;
	.shang{
		width: 9rpx;
		height: 5rpx;
		margin-top: 4rpx;
	}
}


.painameone {
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(147, 147, 147, 1);
	// color: #fff;
	text-align: center;
	display: inline-block;
	height: 75rpx;
	display: flex;
    align-items: center;
    justify-content: center;
}

.zguiview {
	position: relative;
	margin-left: 100rpx;
	width: 86%;
	white-space: nowrap;
	padding-right: 100rpx;
	.znews{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.one{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		width: 100rpx;
		text-align: center;
		height: 75rpx;
		.painame{
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(147, 147, 147, 1);
		}
	}
	.two{
		.painame{
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(232, 232, 232, 1);
		}
	}
	
	.zright {

		.rname {
			width: 100rpx;
			text-align: center;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(147, 147, 147, 1);
			text-align: center;
		}
	}
}
.rowitem{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.rowtit{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	width: 200rpx;
	text-align: center;
	height: 75rpx;
	// margin-right: 20rpx;
	min-width: 200rpx;
	max-width: 200rpx;
	white-space: normal;
	.rowname{
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(147, 147, 147, 1);
	}
	.shang{
		width: 10rpx;
		height: 8rpx;
		margin-top: 4rpx;
	}
}
.ractive{
	.rowname{
		color: rgba(212, 255, 69, 1) !important;
	}
}
.rowmiao{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	width: 150rpx;
	min-width: 150rpx;
	max-width: 150rpx;
	text-align: center;
	height: 75rpx;
	// margin-right: 20rpx;
	white-space: normal;
	.rowmiaoname{
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(232, 232, 232, 1);

	}
	.shang{
		width: 10rpx;
		height: 8rpx;
		margin-top: 4rpx;
	}
}

.txt{
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis; //溢出显示省略号
}

.noV {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;

	image {
		width: 360rpx;
		height: 194rpx;
	}

	view {
		font-size: 28rpx;
		color: #999999;
		margin-top: 47rpx;
	}
}</style>